<template>
  <div>
    <el-row class="top_row">
      <el-col :span="24">
        <div class="top_title">
          <div class="left_add">
            <el-button type="primary" size="mini" icon="el-icon-printer" v-print="'#printTest'">打印</el-button>
          </div>
          <div class="right_sel">
            <el-input size="mini" v-model="Title" placeholder="查找...">
              <el-button slot="append" @click="SelDt" icon="el-icon-search" style="width:50px;"></el-button>
            </el-input>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-table  id="printTest" :data="CheckList.CarList" height="500" ref="CheckList" style="width: 100%">
      <el-table-column prop="pk_Car" label="ID" width="60"></el-table-column>
      <el-table-column prop="TypeName_CHS" label="类型" width="60"></el-table-column>
      <el-table-column prop="Title" label="标题" width="80"></el-table-column>
      <el-table-column prop="CarTitle" label="申请车辆" width="120"></el-table-column>
      <el-table-column label="申请时间" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.CreateDate|TimeFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="FullName" label="申请人" width="80"></el-table-column>
      <el-table-column prop="DepartmentName" label="申请部门" width="80"></el-table-column>
      <el-table-column prop="IsCheck" label="审核" width="60">
        <template slot-scope="ListDt">
        <el-checkbox :disabled="true" :value="ListDt.row.IsCheck"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="审核时间" width="120">
        <template slot-scope="scope">
          <span>
            {{scope.row.CheckDate|TimeFilter}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="CheckUser" label="审核人" width="90"></el-table-column>
      <el-table-column prop="StatusName_CHS" label="状态" width="80">
        <template slot-scope="ListDt">
          <el-tag effect="dark" size="small" :style="'border-color:'+ListDt.row.Visual" :color="ListDt.row.Visual">
            {{ListDt.row.StatusName_CHS}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="IsBack" label="是否归还" width="80">
        <template slot-scope="ListDt">
          <el-checkbox  :disabled="true" :value="ListDt.row.IsBack"></el-checkbox>
          </template>
      </el-table-column>
      <el-table-column label="归还时间" width="120">
        <template slot-scope="scope">
          <span>
            {{scope.row.BackDate|TimeFilter}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="操作"  fixed="right" align="center">
        <template slot-scope="scope" >
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="Update(scope.row.pk_Car)"
          >审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <div class="foot_page">
      <el-pagination background layout="prev, pager, next" @current-change="SelDt" :total="CheckList.Count"
        :current-page.sync="page" :page-size="8">
      </el-pagination>
    </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.top_row {
  border-bottom: 1px solid #f7f7f7;
  padding-bottom: 10px;
  .top_title {
    .left_add {
      float: left;
    }
    .right_sel {
      float: right;
    }
  }
}
//底部分页
.foot_page {
  padding: 5px;
  text-align: center;
}
a {
  color: white;
  text-decoration: none;
}
</style>
<script>
export default {
  data() {
    return {
      //CheckList: [],
      CheckList:{},
      //页数
      page: 1,
      Title: "",
    };
  },
  mounted() {
    this.SelDt();
  },
  methods: {
    SelDt() {
      this.$axios({
        url: "/HrApi/CheckList/GetCheckList",
        method: "GET",
        params: {
          page: this.page,
          limit: 8,
          Title: this.Title
        },
      }).then((res) => {
        console.log(res.data.data);
        if (!res.data.code) {
          this.CheckList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //修改
    Update(id) {
      this.$router.push({
        path: "/Car/Check",
        query: {
          id: id
        }
      })
    }
  },
  //过滤时间
  filters: {
    TimeFilter (t) {
      if (t === null) {
        return '无'
      }
      let dt = t.split('T').join(' ')
      if (dt.split('.').length > 1) {
        dt = dt.split('.')[0]
      }
      return dt
    }
  },
};
</script>